<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睡眠管理后台</title>


    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.17.1/locale/bootstrap-table-zh-CN.min.js"></script>

</head>
<body class="container">
<br/>
<br/>
<h1 style="font-size: 50px; text-align: center">睡眠管理系统后台</h1>
<br/><br/>
<!--导航栏-->
<div>
    <!--个人信息-->
    <div style="float:left; width: 50%">
        <form class="form-horizontal" action="/user/list" method="post">
            <input type="submit" value="用户管理" style="width: 100%;  background-color: red" class="btn btn-info"/>
        </form>
    </div>

    <!--论坛-->
    <div style="float:left; width: 50%">
        <form class="form-horizontal" action="/admin/commentList" method="post">
            <input type="submit" value="评论管理" style="width: 100%;" class="btn btn-info"/>
        </form>
    </div>
</div>
<br/><br/>
<br/><br/>

<!--模糊查询表单-->
<div class="form-inline" style="padding-left: 100px">
    <!--用户名-->
    <div class="form-group">
        <label for="username" class="control-label">用户名</label>
        <input type="text" class="form-control" name="username" id="username" placeholder="用户名"/>
    </div>
    <!--性别-->
    <div class="form-group">
        <label for="sex" class="control-label">性别</label>
        <select style="width: 200px" name="sex" id="sex" class="form-control">
            <option th:value="null" th:text="请选择性别"/>
            <option th:value="男" th:text="男"/>
            <option th:value="女" th:text="女"/>
        </select>
    </div>
    <!--手机号码-->
    <div class="form-group">
        <label for="tel" class="control-label">手机号码</label>
        <input type="text" class="form-control" name="tel" id="tel" placeholder="手机号码"/>
    </div>
    <div class="form-group">
        <input type="button" id="select" value="查询" class="btn btn-info"/>
        <input type="button" id="reset" value="重置" class="btn btn-info"/>
        <a href="/user/toAdd" th:href="@{/user/toAdd}" class="btn btn-info">添加</a>
    </div>
</div>
<!--条件查询按钮响应事件-->
<script>
    $(function () {
        // 查询按钮响应事件
        $("#select").click(function () {
            console.log("tijiao biaodan")
            let windowId = layer.load();
            let username = $("#username").val();
            let sex = $("#sex").val();
            let tel = $("#tel").val();
            console.log(username)
            console.log(sex)
            console.log(tel)
            $.post("/user/list-data",
                {
                    username: username,
                    sex: sex,
                    tel: tel
                }, function (data) {
                    console.log(data)
                    layer.close(windowId);
                    data = eval("(" + data + ")");
                    $("#user-table").bootstrapTable('load', data);
                });

        });
        // 重置按钮
        $("#reset").click(function () {
            $("#username").val("");
            $("#sex").val("男");
            $("#tel").val("");
        });
    });
</script>
<br/>
<!--表格内容-->
<div>
    <script src="../../layer/layer.js"></script>
    <!--bootstrapTable表头-->
    <div class="with:80%">
        <table id="user-table" class="table table-striped table-bordered"></table>
    </div>

    <!--bootstrapTable内容-->
    <script>
        $(function () {

            function addUpdateOperateBtn(value, row, index) {
                return [
                    '<button id="update" type="button" class="btn btn-default">修改</button>'
                ].join('');
            }


            window.updateEvents = {
                //修改按钮的绑定事件
                'click #update': function (e, value, row, index) {
                    console.log("update")
                    let uid = row.uid
                    console.log(uid)
                    $(location).attr('href', '/user/toUpdate/' + uid);

                }
            };

            function addDeleteOperateBtn(value, row, index) {
                return [
                    '<button id="delete" type="button" class="btn btn-default">删除</button>'
                ].join('');
            }


            window.deleteEvents = {
                //删除按钮的绑定事件
                'click #delete': function (e, value, row, index) {
                    let uid = row.uid;
                    console.log("删除")
                    console.log(uid)
                    layer.confirm("确认要删除吗，删除后不能恢复", {title: "确认删除"}, function (index) {
                        layer.close(index);
                        var windowId = layer.load();
                        $.get("/user/delete-data", {uid: uid}, function (data) {
                            layer.close(windowId);
                            data = eval("(" + data + ")");
                            layer.msg("<em style='color:red'>" + data.result + "</em>", {icon: 6});
                            $("#user-table").bootstrapTable('refresh', "/user/list-data");
                        });
                    });
                }
            };

            $("#user-table").bootstrapTable({
                url: "/user/list-data",//数据地址
                striped: true,//是否显示行的间隔
                pageNumber: 1,//初始化加载第几页
                pagination: true,//是否分页
                sidePagination: 'server',
                pageSize: 5,
                pageList: [5, 10, 20],
                showRefresh: true,
                queryParams: function (params) {
                    var temp = {
                        offset: params.offset,
                        limit: params.limit,
                        pageSize: params.pageSize
                    };
                    return temp;
                },
                columns: [
                    {
                        title: "编号",
                        field: "uid",
                        sortable: true
                    },
                    {
                        title: "用户名",
                        field: "username",
                        sortable: false
                    },
                    {
                        title: "密码",
                        field: "password",
                        sortable: false
                    },
                    {
                        title: "昵称",
                        field: "nickname",
                        sortable: false
                    },
                    {
                        title: "性别",
                        field: "sex",
                        sortable: false
                    },
                    {
                        title: "手机号码",
                        field: "tel",
                        sortable: false
                    },
                    {
                        title: "目标周期",
                        field: "targetCycle",
                        sortable: false
                    },
                    {
                        title: '修改',
                        field: 'update',
                        events: updateEvents,//给按钮注册事件
                        formatter: addUpdateOperateBtn//表格中增加按钮

                    },
                    {
                        title: '删除',
                        field: 'delete',
                        events: deleteEvents,//给按钮注册事件
                        formatter: addDeleteOperateBtn//表格中增加按钮
                    }
                ]
            });
        });
    </script>

</div>
</body>
</html>